<script setup>
import Api from '@/api/finance/transfer'
import { useI18n } from "vue-i18n";

defineOptions({
  name: "manualAccess",
});

const { t } = useI18n();

const ruleFormRef = ref(); // 表单实例
const loading = ref(false);
const btnLoading = ref(false);

/* 表单数据 */
const formData = reactive({
  // user_id: "",
  username:"",
  type: "",
  amount: "",
  turnover_rate:null,
  note: "",
});

// 校验规则
const rules = reactive({
  username: [
    { required: true, message: t("hint.4"), trigger: "blur" },
  ],
  // user_id: [
  //   { required: true, message: t("hint.140"), trigger: "blur" },
  // ],
  amount: [
    { required: true, message: t("hint.70"), trigger: "blur" },
  ],
  type: [
    { required: true, message: t("hint.137"), trigger: "blur" },
  ],
  note: [
    { required: true, message:t("hint.141"), trigger: "blur" },
  ],
});

const handleUpdateSystemSettingApi = async () => {
  // 校验表单信息
  let isVerify = false;
  ruleFormRef.value &&
    (await ruleFormRef.value.validate((valid) => (isVerify = valid)));
  if (!isVerify) {
    ElMessage.warning(t("hint.134"));
    return;
  }
  btnLoading.value = true;
  // 循环判断formData[key]的value是否null或者"",那么就删除
  for (const key in formData) {
    if (formData[key] === null || formData[key] === "") {
      delete formData[key];
    }
  }
  
  // 发送请求
  Api.post(formData)
    .then((res) => {
      ElMessage.success(t('hint.29'))
      formData.username = "";
      // formData.user_id = "";
      formData.amount = "";
      formData.turnover_rate = null;
      formData.type = "";
      formData.note = "";
    })
    .finally(() => {
      btnLoading.value = false;
    });
};
</script>

<template>
  <div class="app-container">
    <el-card el-card>
      <template #header>
        <span>{{ t('route.c5') }}</span>
      </template>
      <div v-if="loading" class="w-1/4">
        <el-skeleton :rows="15" animated />
      </div>
      <el-form
        v-else
        ref="ruleFormRef"
        :rules="rules"
        label-width="auto"
        style="max-width: 450px"
        @submit.enter.prevent
        :model="formData"
        class="form-container"
      >
        <!-- <el-form-item :label="t('label.15')" prop="user_id">
          <el-input v-model.number="formData.user_id" />
        </el-form-item> -->
        <el-form-item :label="t('label.9')" prop="username">
          <el-input v-model="formData.username" />
        </el-form-item>
        <el-form-item :label="t('label.26')" prop="amount">
          <el-input type="number" v-model.number="formData.amount" />
        </el-form-item>
        <el-form-item :label="t('label.120')" prop="type">
          <el-select v-model="formData.type" :placeholder="t('hint.137')">
            <el-option :label="`+ ${t('status.manual_deposit')}`" value="manual_deposit" />
            <el-option :label="`+ ${t('status.manual_credit')}`" value="manual_credit" />
            <el-option :label="`+ ${t('status.promotion_bonus')}`" value="promotion_bonus" />
            <el-option
              :label="`- ${t('status.mistaken_withdrawal')}`"
              value="mistaken_withdrawal"
            />
            <el-option
              :label="`- ${t('status.admin_deduction')}`"
              value="admin_deduction"
            />
            <el-option :label="`- ${t('status.deposit_reversal')}`" value="deposit_reversal" />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('label.141')" prop="turnover_rate">
          <el-input v-model="formData.turnover_rate" >
            <template #append>%</template>
          </el-input>
          <span class="text-gray-400 text-sm">{{ t('hint.138') }}</span>
        </el-form-item>
        <el-form-item :label="t('label.14')" prop="note">
          <el-input v-model="formData.note" type="textarea" />
        </el-form-item>
        <el-form-item label=" ">
          <el-button
            :loading="btnLoading"
            type="primary"
            @click="handleUpdateSystemSettingApi"
            >{{ t("btn.1") }}</el-button
          >
        </el-form-item>
      </el-form>
      <br />
      <el-divider />
      <div>
        <span class="text-gray-400 text-sm my-2">{{ t("text.1") }}</span>
        <el-row :gutter="12">
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div
              class="bg-#f2f2f2 dark:bg-#0a0a0a make1 flex flex-row mt-2"
            >
              <ul class="py-2 flex flex-col space-y-2">
                <li class="text-[var(--el-text-color-regular)]">
                  <span class="text-sm">{{ t("status.manual_deposit") }}：</span>
                  <span class="text-sm">{{ t("text.2") }}；</span>
                </li>
                <li class="text-[var(--el-text-color-regular)]">
                  <span class="text-sm">{{ t("status.manual_credit") }}：</span>
                  <span class="text-sm">{{ t("text.3") }}</span>
                </li>
                <li class="text-[var(--el-text-color-regular)]">
                  <span class="text-sm">{{ t("status.promotion_bonus") }}：</span>
                  <span class="text-sm">{{ t("text.4") }}</span>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div
              class="bg-#f2f3f5 dark:bg-#0a0a0a make2 flex flex-row mt-2"
            >
              <ul class="py-2 flex flex-col space-y-2">
                <li class="text-[var(--el-text-color-regular)]">
                  <span class="text-sm">{{ t("status.mistaken_withdrawal") }}：</span>
                  <span class="text-sm">{{ t("text.7") }}</span>
                </li>
                <li class="text-[var(--el-text-color-regular)]">
                  <span class="text-sm">{{ t("status.admin_deduction") }}：</span>
                  <span class="text-sm">{{ t("text.8") }}</span>
                </li>
                <li class="text-[var(--el-text-color-regular)]">
                  <span class="text-sm">{{ t("status.deposit_reversal") }}：</span>
                  <span class="text-sm">{{ t("text.9") }}</span>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.int {
  width: 220px;
}

.btn {
  margin-right: 14px;
}
.make1::before {
  content: "";
  display: block;
  width: 5px;
  height: auto;
  background-color: green;
  margin-right: 15px;
}
.make2::before {
  content: "";
  display: block;
  width: 5px;
  height: auto;
  background-color: red;
  margin-right: 15px;
}
</style>
